<template>
    <div>
        <div style="padding:8px ; background: white;">
            <el-table class="table-container" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;"
                :header-cell-style="{textAlign: 'center' , backgroundColor: '#EFF3F8 ', color: 'grey', fontSize: '12px',height:'15px' }"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="45"> 
                </el-table-column>
                <el-table-column label="序号" width="55">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column label="时间" width="125">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column label="标题" width="120">
                    <template slot-scope="scope">{{ scope.row.title }}</template>
                </el-table-column>
                <el-table-column label="信息链接" width="160">
                    <template slot-scope="scope">
                        <a style="color: blue;" :href="scope.row.link">{{ scope.row.link }}</a>
                    </template>
                </el-table-column>
                <el-table-column label="信息来源" width="70">
                    <template slot-scope="scope">{{ scope.row.source }}</template>
                </el-table-column>
                <el-table-column label="属性" width="70">
                    <template slot-scope="scope">{{ scope.row.attribute }}</template>
                </el-table-column>
                <el-table-column label="类别" width="70">
                    <template slot-scope="scope">{{ scope.row.category }}</template>
                </el-table-column>
                <el-table-column label="舆情分级" width="70">
                    <template slot-scope="scope">
                        <div class="red-warning">
                            {{ scope.row.level }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="处置状态" width="70">
                    <template slot-scope="scope">{{ scope.row.status }}</template>
                </el-table-column>
                <el-table-column label="归档材料是否上传" width="70">
                    <template slot-scope="scope">{{ scope.row.uploaded ? '是' : '否' }}</template>
                </el-table-column>
                <el-table-column label="归档材料" width="90">
                    <template slot-scope="scope">{{ scope.row.materials }}</template>
                </el-table-column>
                <el-table-column label="去处置" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDispose(scope.row)">去处置</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                :current-page="1"
                :total="400"
                layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
  </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    date: '2023-10-01 08:15',
                    title: '西南交大校园安全事件',
                    link: 'http://example.com/1',
                    source: '微博',
                    attribute: '自动采集',
                    category: '校园安全',
                    level: '黄色预警',
                    status: '未处置',
                    uploaded: '是',
                    materials: '材料1 | 下载'
                },
                {
                    id: 2,
                    date: '2023-10-02 09:30',
                    title: '西南交大食堂卫生问题',
                    link: 'http://example.com/2',
                    source: '抖音',
                    attribute: '手动添加',
                    category: '后勤管理',
                    level: '蓝色预警',
                    status: '已处置',
                    uploaded: '否',
                    materials: '材料2 | 下载'
                },
                {
                    id: 3,
                    date: '2023-10-03 10:45',
                    title: '西南交大图书馆占座现象',
                    link: 'http://example.com/3',
                    source: '微信',
                    attribute: '自动采集',
                    category: '学习环境',
                    level: '绿色预警',
                    status: '未处置',
                    uploaded: '是',
                    materials: '材料3 | 下载'
                },
                {
                    id: 4,
                    date: '2023-10-04 11:20',
                    title: '西南交大宿舍网络故障',
                    link: 'http://example.com/4',
                    source: '微博',
                    attribute: '手动添加',
                    category: '网络管理',
                    level: '红色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料4 | 下载'
                },
                {
                    id: 5,
                    date: '2023-10-05 12:10',
                    title: '西南交大校园交通拥堵',
                    link: 'http://example.com/5',
                    source: '抖音',
                    attribute: '自动采集',
                    category: '交通管理',
                    level: '黄色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料5 | 下载'
                },
                {
                    id: 6,
                    date: '2023-10-06 13:25',
                    title: '西南交大实验室设备损坏',
                    link: 'http://example.com/6',
                    source: '微信',
                    attribute: '手动添加',
                    category: '实验室管理',
                    level: '蓝色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料6 | 下载'
                },
                {
                    id: 7,
                    date: '2023-10-07 14:30',
                    title: '西南交大校园绿化问题',
                    link: 'http://example.com/7',
                    source: '微博',
                    attribute: '自动采集',
                    category: '环境管理',
                    level: '绿色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料7 | 下载'
                },
                {
                    id: 8,
                    date: '2023-10-08 15:40',
                    title: '西南交大校园噪音投诉',
                    link: 'http://example.com/8',
                    source: '抖音',
                    attribute: '手动添加',
                    category: '生活管理',
                    level: '红色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料8 | 下载'
                },
                {
                    id: 9,
                    date: '2023-10-09 16:50',
                    title: '西南交大校园垃圾分类问题',
                    link: 'http://example.com/9',
                    source: '微信',
                    attribute: '自动采集',
                    category: '环境管理',
                    level: '黄色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料9 | 下载'
                },
                {
                    id: 10,
                    date: '2023-10-10 17:55',
                    title: '西南交大校园路灯故障',
                    link: 'http://example.com/10',
                    source: '微博',
                    attribute: '手动添加',
                    category: '设施管理',
                    level: '蓝色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料10 | 下载'
                },
                {
                    id: 11,
                    date: '2023-10-11 18:05',
                    title: '西南交大校园停车问题',
                    link: 'http://example.com/11',
                    source: '抖音',
                    attribute: '自动采集',
                    category: '交通管理',
                    level: '绿色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料11 | 下载'
                },
                {
                    id: 12,
                    date: '2023-10-12 19:15',
                    title: '西南交大校园食堂价格问题',
                    link: 'http://example.com/12',
                    source: '微信',
                    attribute: '手动添加',
                    category: '后勤管理',
                    level: '红色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料12 | 下载'
                },
                {
                    id: 13,
                    date: '2023-10-13 20:25',
                    title: '西南交大校园宿舍卫生问题',
                    link: 'http://example.com/13',
                    source: '微博',
                    attribute: '自动采集',
                    category: '生活管理',
                    level: '黄色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料13 | 下载'
                },
                {
                    id: 14,
                    date: '2023-10-14 21:35',
                    title: '西南交大校园网络速度慢',
                    link: 'http://example.com/14',
                    source: '抖音',
                    attribute: '手动添加',
                    category: '网络管理',
                    level: '蓝色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料14 | 下载'
                },
                {
                    id: 15,
                    date: '2023-10-15 22:45',
                    title: '西南交大校园图书馆噪音问题',
                    link: 'http://example.com/15',
                    source: '微信',
                    attribute: '自动采集',
                    category: '学习环境',
                    level: '绿色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料15 | 下载'
                },
                {
                    id: 16,
                    date: '2023-10-16 23:55',
                    title: '西南交大校园宿舍热水问题',
                    link: 'http://example.com/16',
                    source: '微博',
                    attribute: '手动添加',
                    category: '生活管理',
                    level: '红色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料16 | 下载'
                },
                {
                    id: 17,
                    date: '2023-10-17 00:05',
                    title: '西南交大校园操场设施损坏',
                    link: 'http://example.com/17',
                    source: '抖音',
                    attribute: '自动采集',
                    category: '设施管理',
                    level: '黄色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料17 | 下载'
                },
                {
                    id: 18,
                    date: '2023-10-18 01:15',
                    title: '西南交大校园垃圾分类宣传',
                    link: 'http://example.com/18',
                    source: '微信',
                    attribute: '手动添加',
                    category: '环境管理',
                    level: '蓝色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料18 | 下载'
                },
                {
                    id: 19,
                    date: '2023-10-19 02:25',
                    title: '西南交大校园宿舍网络故障',
                    link: 'http://example.com/19',
                    source: '微博',
                    attribute: '自动采集',
                    category: '网络管理',
                    level: '绿色预警',
                    status: '已处置',
                    uploaded: '是',
                    materials: '材料19 | 下载'
                },
                {
                    id: 20,
                    date: '2023-10-20 03:35',
                    title: '西南交大校园食堂卫生问题',
                    link: 'http://example.com/20',
                    source: '抖音',
                    attribute: '手动添加',
                    category: '后勤管理',
                    level: '红色预警',
                    status: '未处置',
                    uploaded: '否',
                    materials: '材料20 | 下载'
                }
            ],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            multipleSelection: []
        }
    },

    methods: {
        handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleDispose(row) {
            // 处理去处置逻辑
        },
        handleEdit(row) {
            // 处理编辑逻辑
        },
        handleDelete(row) {
            // 处理删除逻辑
        }
    }
}
</script>
<style scoped lang="scss">
.red-warning {
    color: red;
    border-radius: 3px;
    background-color: rgba(246, 9, 9, 0.14);
}
//表头高度
.table-container{
    height: 500px;
    overflow-y: scroll;
}
</style>